﻿@model dynamic

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <div style="background-color: black; width: 100%">
                <div class="container">
                    <div class="row">
                        <div class="navbar navbar-inverse" style="margin-bottom: 0px">
                            <div class="navbar-inner">
                                <div class="container-fluid">
                                    <a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><a href="#" class="brand">慕学网</a>
                                    <div class="nav-collapse collapse navbar-responsive-collapse">
                                        <ul class="nav" id="nav">
                                            <li id="first">
                                                <a href="~/CloudClass/Home/Index">首页</a>
                                            </li>
                                            <li id="second" class="active">
                                                <a href="~/CloudClass/Class/Index">实用技能</a>
                                            </li>
                                            <li>
                                                <a href="#">高等教育</a>
                                            </li>
                                            <li>
                                                <a href="#">我的云课堂</a>
                                            </li>
                                        </ul>
                                        <ul class="nav pull-right">

                                            <li>
                                                <input type="text" class="search-query" placeholder="搜索课程、计划或用户" />
                                            </li>
                                            <li class="divider-vertical"></li>
                                          
                                            <li id="UserInfo">
                                                <a href="#login" role="button" data-toggle="modal">登陆/注册</a> 
                                            </li>
                                            
                                        </ul>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div id="login" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">登陆慕学云课堂</h3>
    </div>
    <div class="modal-body">
        <div class="alert alert-error" id="tip" style="display: none">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>用户名或密码错误</strong>
        </div>
        <form class="form-horizontal" id="form1" method="GET">
            
            <div class="control-group">
                <label class="control-label" for="email">邮箱</label>
                <div class="controls">
                    <input  id="email" type="text" required="required" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="password">密码</label>
                <div class="controls">
                    <input  id="password" type="password" required="required"/>
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                  
                    <button type="button" id="btnlogin" class="btn btn-primary">登陆</button>

                    &nbsp;&nbsp;<small>还没注册？赶快<a href="~/CloudClass/Home/Register">注册</a></small>
                </div>
            </div>

        </form>


    </div>

</div>

<script>
    $('#btnlogin').click(function () {

        $.ajax({
            url: "/CloudClass/Home/Login",
            type: this.method,
            data: { "email": $("#email").val(), "password": $("#password").val() },
            success: function (result) {
                
                if (result == "0") {
                    //alert(1)
                    $("#tip").show();
                    return false;
                } else {
                    location.href = location.href;
                    //$("#UserInfo").html("ssss")
                }
            },
            error: function (result) {
                alert(result);
            }
        });

        //return false;
    });
    
    $(function() {
        $.ajax({
            url: "/CloudClass/Home/GetCurrentUser",
            type: this.method,
            data: {},
            success: function (result) {
                if (result != "") {
                    $("#UserInfo").html("<a>" + result.Email + "</a>");
                    $("#UserInfo").parent().append("<li><a class='quit'>退出</a></li>");
                } 
            },
            error: function (result) {
                alert(result);
            }
        });
        var url = window.location.href;
        if (url.indexOf("/Home/") > -1) {
            $("#nav").find(".active").removeClass("active");
            $("#first").addClass("active");
        } else {
            $("#nav").find(".active").removeClass("active");
            $("#second").addClass("active");
        }
        //退出登录
        $(".quit").live("click", function () {
            $.ajax({
                url: "/CloudClass/Home/SignOut",
                type: this.method,
                data: {},
                success: function(result) {

                    location.href = location.href;
                },
                error: function(result) {
                    alert(result);
                }
            });
        });


    })
</script>